<!DOCTYPE html>
<html lang="utf-8">
<head>
<script src="js/jquery.min.js"></script>
<script src="js/Jcrop.js"></script>
<script type="text/javascript">
	var jcrop_api ;
	var thumbnail;
	jQuery(function($) {
		// cropmove事件是指拖动、拖拽框的动作
		// 本函数的作用是每次对于框的变化，都记录其坐标变化，并记录下来
		$('#interface').on('cropmove', function(e, s, c) {
			$('#crop-x').val(c.x);
			$('#crop-y').val(c.y);
			$('#crop-w').val(c.w);
			$('#crop-h').val(c.h);
		});
		
		jcropInit();

		$("#btn_change1").click(function(){
			jcrop_api.destroy();
			jcrop_api.setImage("img/sun.jpg");
			jcropInit();
		});
	});
	
	function jcropInit(){
		// Most basic attachment example
		$('#target').Jcrop({
			//宽高比率
			aspectRatio: 1,
			//最小宽度，高度
			minSize : [100,100],
			allowSelect : false,
			boxWidth : 400,
			boxHeight : 400,
			setSelect : [ 0, 0, 200, 200 ]
		},function(){
			jcrop_api = this;
			new $.Jcrop.component.Thumbnailer().init(jcrop_api, {el:$("#preview"),width: 200, height: 200});
			new $.Jcrop.component.Thumbnailer().init(jcrop_api, {el:$("#preview2"),width: 120, height: 120});
		});
	}
</script>
<link rel="stylesheet" href="css/Jcrop.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/demos.css">
<style>
.img-box {
	height: 400px;
	width: 650px;
}
.page-interface {
	height: 400px;
	width: 400px;
	border: 1px solid;
	position : relative;
	float : left;
}
.page-preview {
	position : relative;
	float : left;
	left: 2em;
	height: 200px;
	width: 200px;
	border: 1px solid;
	margin: 0 0 2em;
}
.page-preview2 {
	position : relative;
	float : left;
	left: 2em;
	height: 120px;
	width: 120px;
	border: 1px solid;
}
#text-inputs {
	margin: 10px 8px 0;
}

.input-group {
	margin-right: 1.5em;
}

.nav-box {
	width: 650px;
	padding: 0 !important;
	margin: 2em 0;
	background-color: #f8f8f7;
}
</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="span12">
				<div class="jc-demo-box">
					<div class="img-box">
						<div id="interface" class="page-interface">
							<img src="img/sago.jpg" id="target">
						</div>
						<div id="preview" class="page-preview">
							<img src="img/sago.jpg" id="preview" width="200" height="200">
						</div>
						<div id="preview2" class="page-preview2">
							<img src="img/sago.jpg" id="preview" width="120" height="120">
						</div>
					</div>
					<div class="nav-box">
						<form onsubmit="return false;" id="text-inputs">
							<span class="input-group">
								<b>X</b> <input type="text" name="cx" id="crop-x" class="span1">
							</span>
							<span class="input-group">
								<b>Y</b> <input type="text" name="cy" id="crop-y" class="span1">
							</span>
							<span class="input-group">
								<b>W</b> <input type="text" name="cw" id="crop-w" class="span1">
							</span>
							<span class="input-group">
								<b>H</b> <input type="text" name="ch" id="crop-h" class="span1">
							</span>
							<span class="input-group">
								<input type="button" name="ch" id="btn_change1" value="change img">
							</span>
						</form>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
